Elevate Your Cypress Testing: Top 10 Essential Plugins for 2024
Intro:
Cypress is a game-changer for end-to-end testing, but its power truly shines when paired with the right plugins. In this blog post, we'll explore 10 must-have Cypress plugins that will supercharge your testing workflows, boost efficiency, and help you catch even the trickiest bugs.
1. Cypress-e2e-cli:
One of the biggest hurdles any new Test automation engineer or developer has to overcome is setting up a new framework. And while having a plan is half the battle, actually setting up the framework is still the other half. This plugin will guide you through the process with several questions. After which you'll have a basic framework, ready to go.
And while the bundlers and reporters are limited in their options. It is without a doubt the easiest way to setup a Cypress project within mere minutes. Any hassle or configuration is done for the user. It was very satisfactory to open vsCode with a fully functional framework, a filled package.json and Cypress config.
2. Cypress-Vite:
If you're using Vite as your frontend build tool, Cypress-Vite offers seamless integration. Get faster dev server start times, lightning-fast HMR (Hot Module Replacement), and optimize your Cypress setup for modern development workflows. By installing this preprocessor, Cypress will handle the tests faster and can use the same configuration as the development. Making it even easier to integrate Cypress into the development process.
Using Cypress-Vite didn't just speed up my framework, it also enabled me to use the same configuration for both my API testing framework which is powered by vitest and my Cypress framework, which is now powered by Cypress-Vite. So now, the unit tests for both the backend and frontend use vite, the component tests are using vite-dev-server and the end2end tests are using Cypress-vite, this enables the team to use specific features or plugins for vite in all it's testing.
3. @Shopify/Cypress-graphql:
As a huge fan of the Cypress intercept functionality and someone forced to use graphql, shopify/Cypress-graphql came as a god send. The default Cypress intercept functionality is able to intercept and adjust graphql calls, it does not lend itself to it quite easily. While intercepting graphql requests with it, you get the feeling it was not built for it.
Now with Shopify/Cypress-graphql those days are history. Again the Cypress intercept is running the show. It becomes easy to hijack specific graphql requests based on their operation name and even mock all their responses. With the added bonus that the difference between cy.intercept and Shopify's version is clear without obscuring the meaning of either. The graphql command is quite simply cy.interceptGql.
4. @neuralegion/cypress-har-generator:
One of the major difficulties in test automation is communication about test failures towards development, especially when a UI test fails and it is probably a backend issue. This plugin helps to resolve the issue. It does this by creating a har file. And this har file will contain all the information regarding API requests. These relatively tiny files are sometimes crucial in debugging a certain bug. Simply because it enables the reproduction of any UI test on an API level.
Downside of this plugin is that it is no longer in active development. That does not stop it from reach 55.000 downloads on a weekly basis. This plugin has stopped many a discussion from reaching the 'can't reproduce' state. And with it's impressive collection of options, this plugin still stands tall.
5. Cypress/grep:
Another major hurdle in UI automation is it's duration. Regardless of it's implementation, browser tests always take longer. One of the most common solutions to this problem is allocating tests to a certain suite or test type. For instance, you could define certain tests as smoke tests. With Cypress/grep, it becomes possible to run specific tests without much overhead. You can do this by adding a simple tag into the test name. This plugin will then filter on the name and only run the correctly tagged tests.
While it's github or npm page does not reflect it well, this plugin is incredibly simple to use. In 10 minutes you'd have a basic configuration and running framework. And you'll only be scratching the surface of it's abilities.
6. Cypress-fail-fast:
Don't waste time on a broken test suite. Cypress-fail-fast aborts your test run as soon as the first failure occurs, preventing unnecessary test executions and accelerating your feedback loop. One of the first tests I write for any page it validating if all the buttons and input fields are present. If they are not, it's often not worth it too run the following tests. I'd want to mark that first check as fail-fast, because if that test fails. The others should no longer run.
This plugin allows you to mark certain tests as critical. If any of those critical fail, the suite (spec file) is skipped completely. Freeing up the pipeline for software that actually works.
7. cypress-mochawesome-reporter:
Mochawesome-reporter solves yet another major problem in testing: reporting towards management. This zero-config plugin is perfect for test automation engineers that do not wish to spend a great deal of time generating a report. After the implementation of this plugin, each cypress spec file will have it's own nice html report, complete with screenshots and a stack trace.
Next thing to do would either be merging the reports and hosting or just host each file individually. After that it's all about sharing the url with stakeholders. And that's all your reporting needs done.
8. Cypress-cucumber-preprocessor:
A cornerstone of test automation is the use of cucumber. This layer on top of any framework helps in translating the technical capabilities of the testing framework towards non-technical people. Cucumber does allow the author to quickly add different test cases without touching the actual code or logic of the framework. In some instances this will allow business or analysts to add test cases.
The benefits of this plugin/cucumber don't stop there. Due to the fact that cucumber is written in a human readable language, reporting the test failures becomes a great deal easier. Even the implementation of certain acceptance criteria becomes faster. As the criteria have already been written by the analyst.
9. Eslint-plugin-cypress:
Maintain clean and consistent code in your Cypress tests. Eslint-plugin-cypress provides linting rules tailored for Cypress best practices, catching potential errors and promoting code quality. This will create a framework that is more fun to work in, and a great deal easier to maintain.
10. Cypress-dark:
Switching between my dark mode VScode and the Cypress webrunner isn't always a pleasant experience, especially those late night marathons to get the feature out. Cypress Darkmode reduces the strain of constantly switching between the familiar darkness and the brightness of the seven suns.
Summary:
By incorporating these top-notch plugins into your Cypress toolkit, you'll unlock a new level of testing efficiency, quality, and productivity. Whether you're streamlining your setup, improving reporting, or embracing BDD, these plugins will help you take your Cypress testing to the next level.